<!-- 顶部导航栏 -->
<template>
	<view>
		<image :src="imgSrc" v-if="imgSrc" class="bg-img" mode="widthFix"></image>
		<view class="title-bar" :class="isFix ? '' : 'flx'" :style="{ 'padding-top': statusHeight + 'px', 'background-color': bgColor ? bgColor : '#FFF' }">
			<view class="top-box">
				<view class="top-module left-the" @tap="backPage">
					<image class="back-button" src="./back-icon.png" mode="aspectFit" v-if="isBack"></image>
					<slot name="left-slot"></slot>
				</view>
				<view class="top-module center-the"><slot name="center-slot"></slot></view>
				<view class="top-module right-the">
					<!-- <text>1</text> -->
					<slot name="right-slot"></slot>
				</view>
			</view>
		</view>
		<view class="title-bar" :style="{ height: 'calc(' + statusHeight + 'px + 80rpx)' }" v-if="!isFix"></view>
		
	</view>
</template>

<script>
/**
 * 
 * @description 顶部导航栏
 * slot:
 * 		left-slot:左侧插槽
 * 		center-solt:中间插槽
 * 		right-solt:右侧插槽
 * @property {String} 			bgColor				顶部导航栏颜色;默认值：#FFF
 * @property {String, Boolean} 	isBack				是否显示返回;默认值：true
 * @property {String, Boolean} 	isBackFunction		左侧插槽是否绑定返回事件;默认值：true
 * @property {String, Boolean} 	isFix				是否固定在顶部，不悬浮;默认值：true
 * @property {String} 			imgSrc				导航栏背景图;默认值：空
 * @example 
 * <top-navigation :isBack="true" :bgColor="themeColors.white"><template #center-slot><view class="mine-name">信息</view></template></top-navigation>
 *   */

export default {
	name: 'top-navigation',
	data() {
		return {};
	},
	props: {
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: true
		},
		isBackFunction: {
			type: [Boolean, String],
			default: true
		},
		isFix: {
			type: [Boolean, String],
			default: true
		},
		imgSrc: {
			type: String,
			default: ''
		},
	},
	computed: {
		
	},
	methods: {
		backPage() {
			if (!this.isBackFunction) {
				return;
			}
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.title-bar {
	width: 750rpx;
	height: auto;
	z-index: 2;
	position: relative;
}
.top-box {
	height: auto;
	min-height: 80rpx;
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;

	.back-button {
		width: 28rpx;
		height: 28rpx;
	}
	.top-module {
		min-width: 50rpx;
		width: auto;
		display: flex;
		align-items: center;
	}
	.left-the {
		justify-content: flex-start;
	}
	.right-the {
		justify-content: flex-end;
	}
	.center-the {
		justify-content: center;
		font-weight: 550;
		font-size: 30rpx;
	}
}
.flx {
	position: fixed;
	top: 0rpx;
}
.bg-img{
	width: 750rpx;
	position: absolute;
	top: 0rpx;
	z-index: 1;
}
</style>
